	* {
	  margin: 0;
	  padding: 0;
	}

	html,
	body {
	  width: 100%;
	  height: 100%;
	}

	.box {
	  position: relative;
	  width: 620px;
	  height: 220px;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%);
	  border: 2px solid #DCDFE6;
	  background: #F2F6FC;
	  box-shadow: 0 2px 4px rgba(0, 0, 0, .12),
	    0 0 6px rgba(0, 0, 0, .04);
	}

	.pic {
	  width: 600px;
	  height: 200px;
	  margin: 10px;
	  overflow: hidden;
	}

	ul {
	  position: absolute;
	  top: 170px;
	  left: 250px;
	  width: 300px;
	  height: 100px;
	}

	ul li {
	  width: 30px;
	  height: 30px;
	  border-radius: 50%;
	  list-style: none;
	  margin: 0 3px;
	  text-align: center;
	  line-height: 30px;
	  float: left;
	  background-color: rgba(0, 0, 0, .5);
	  transition: all .5s;
	}

	ul li:hover {
	  background-color: rgba(255, 0, 0, .5);
	}

	ul li a {
	  display: inline-block;
	  width: 30px;
	  height: 30px;
	  color: white;
	  text-align: center;
	  line-height: 30px;
	  text-decoration: none;
	}